<template>
  <!-- 订单评论审核 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 填写关键字 -->
      <el-input
        v-model="keyword"
        placeholder="请输入关键字"
        size="small"
        clearable
        style="width:200px"
      ></el-input>
      <!-- 填写编号 -->
      <el-input
        v-model="orderId"
        placeholder="请输入订单编号"
        size="small"
        clearable
        style="width:200px"
      ></el-input>
      <!-- 选择状态 -->
      <el-select v-model="checkStatus" placeholder="请选择状态" clearable  size="small">
        <el-option
          v-for="status in statusList"
          :key="status"
          :label="status"
          :value="status"
        >
        </el-option>
      </el-select>
      <el-button type="primary" size="small" @click="searchData">查询</el-button>
    </div>
    <div class="content">
      <el-table :data="tableData" size='small' style="width:100%;height=10px">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="content" label="评论内容" align="center"></el-table-column>
        <el-table-column prop="customerId" label="顾客编号" align="center"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="commentTime" label="评论时间" align="center">
          <template slot-scope="scope">
            <div>
              {{scope.row.commentTime | fmtDate_global}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customerId" label="状态" align="center">
          <template slot-scope="scope">
            <div>
              <el-tag type="danger" v-if="scope.row.status == '不通过'" size="small"  effect="dark">不通过</el-tag>
              <el-tag type="success" v-else-if="scope.row.status == '通过'" size="small"  effect="dark" >通过</el-tag>
              <el-tag  size="small" v-else effect="dark" >未审核</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="deleteComment(scope.row.id)">删除</el-button>
              <span v-if="scope.row.status == '未审核'">
                <el-button type="text"  size="small" @click="passApply(scope.row.id)">通过</el-button>
                <el-button type="text" size="small" @click="outApply(scope.row.id)">不通过</el-button>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="paginetion">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2,4,6,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {get,post} from '@/utils/request'
export default {
  data() {
    return {
      //状态列表
      statusList:['未审核','通过','不通过'],
      //头部选择的状态
      checkStatus:'',
      // 头部关键字查询
      keyword:'',
      // 头部订单Id
      orderId:'',
      //table中的数据
      tableData:[],
      //table中的数据总和
      total:0,
      //当前页面
      currentPage:1,
      //页面大小
      pageSize:10,
      //搜索中填写的数据
      queryData:{}
    };
  },
  computed: {},
  methods: {
    // 搜索事件
    searchData(){
      let data = {
        status:this.checkStatus,
        keywords:this.keywords,
        orderId:this.orderId
      }
      for(let i in data){
        if(!data[i]){
          delete data[i]
        }
      }
      this.queryData = data
      this.currentPage = 1
      this.getTableData()
    },
    //获取Table中的数据
    async getTableData(){
      let data = {
        page:this.currentPage,
        pageSize:this.pageSize
      }
      data = {...data,...this.queryData}
      let res = await get('/orderComment/pageQuery',data)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    //页面大小改变
    handleSizeChange(val){
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    //换页
    handleCurrentChange(val){
      this.currentPage = val
      this.getTableData()
    },
    //删除评论
    async deleteComment(id){
        await get('/orderComment/deleteById',{id})
        this.getTableData()
    },
    //评论通过审核
    async passApply(id){
      await post('/orderComment/checkPass',{id})
      this.getTableData()
    },
    //评论审核不通过
    async outApply(id){
      await post('/orderComment/checkNoPass',{id})
      this.getTableData()
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {},
};
</script>
<style scoped>
/* 分页区域样式 */
  .paginetion {
    /* margin-top: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px; */
    margin-top: 10px;
    float: right;
  }
  .header{
    margin-bottom: 30px;
  }
</style>